(function () {
  // 步骤3：创建echarts实例
  let myChart = echarts.init(document.querySelector(".box4"));

  // 步骤4：定义配置（指定图表的配置项和数据）
  let option = {
    title: [
      {
        text: "总体样式",
        textStyle: {
          color: "#fff",
          fontSize: 20,
          fontWeight: "400",
        },
        left: 10,
        top: 20,
        // x: ["10"],
        // y: "10",
      },
      {
        text: "(单位:元)",
        textStyle: {
          color: "#fff",
          fontSize: 15,
          fontWeight: "400",
        },
        left: 100,
        top: 23,
        // x: ["20"],
        // y: "10",
      },
    ],
    // 系列
    series: [
      {
        name1: "1",
        center: ["60%", "50%"],
        type: "pie",
        data: [
          {
            value: 30,
            itemStyle: {
              color: "#333843",
            },
          },
          {
            value: 90,
            itemStyle: {
              color: "red",
            },
          },
        ],
        // 饼图图形上的文本标签，
        label: {
          show: false,
        },
        // 圆半径
        radius: [30, 40],
        // 起始角度，支持范围[0, 360]。
        startAngle: 200,
      },
      {
        name1: "2",
        center: ["75%", "50%"],
        type: "pie",
        data: [
          {
            value: 30,
            itemStyle: {
              color: "#333843",
            },
          },
          {
            value: 90,
            itemStyle: {
              color: "green",
            },
          },
        ],
        // 饼图图形上的文本标签，
        label: {
          show: false,
        },
        // 圆半径
        radius: [30, 40],
        // 起始角度，支持范围[0, 360]。
        startAngle: 200,
      },
      {
        name1: "3",
        center: ["90%", "50%"],
        type: "pie",
        data: [
          {
            value: 30,
            itemStyle: {
              color: "#333843",
            },
          },
          {
            value: 90,
            itemStyle: {
              color: "#6abaf2",
            },
          },
        ],
        // 饼图图形上的文本标签，
        label: {
          show: false,
        },
        // 圆半径
        radius: [30, 40],
        // 起始角度，支持范围[0, 360]。
        startAngle: 200,
      },
    ],
    // 加水印
    graphic: [
      {
        name: "1",
        type: "text",
        top: "40%",
        left: "58%",
        style: {
          text: "532",
          fill: "#fff",
          color: "#fff",
          fontSize: 12,
          fontWeight: "bold",
        },
      },
      {
        type: "text",
        top: "52%",
        left: "56%",
        style: {
          text: "占比54%",
          fill: "#A6A8B6",
          fontSize: 12,
          fontWeight: "normal",
        },
      },

      {
        name: "2",
        type: "text",
        top: "40%",
        left: "73%",
        style: {
          text: "532",
          fill: "#fff",
          color: "#fff",
          fontSize: 12,
          fontWeight: "bold",
        },
      },
      {
        type: "text",
        top: "52%",
        left: "71%",
        style: {
          text: "占比54%",
          fill: "#A6A8B6",
          fontSize: 12,
          fontWeight: "normal",
        },
      },

      {
        name: "3",
        type: "text",
        top: "40%",
        left: "88%",
        style: {
          text: "532",
          fill: "#fff",
          color: "#fff",
          fontSize: 12,
          fontWeight: "bold",
        },
      },
      {
        type: "text",
        top: "52%",
        left: "86%",
        style: {
          text: "占比54%",
          fill: "#A6A8B6",
          fontSize: 12,
          fontWeight: "normal",
        },
      },
      //
      {
        name: "x",
        type: "text",
        top: "40%",
        left: "5%",
        style: {
          text: "53224253",
          fill: "yellow",
          color: "#fff",
          fontSize: 40,
          fontWeight: "400",
        },
      },
    ],

    tooltip: {
      //触发类型 item 数据项触发 axis坐标轴触发
      trigger: "axis",
      backgroundColor: "#ccc",
    },
  };

  // 步骤5：使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
})();
